class Sprite {
    constructor(dir, imagePath, x, y) {
        this.type = 'Sprite'
        this.dir = dir
        this.image = new Image()
        this.image.src = imagePath
        this.x = x
        this.y = y
        this.image.onload = this.onload()
        this.id = window.Sid
        this.count()
    }
    imageFrom(path){
        this.image.src=path
    }
    count() {
        window.Sid++
    }
    static reduce() {
        window.Sid--
    }
    onload() {
        this.h = this.image.height
        this.w = this.image.width
    }
    update() {

    }
    //js没有直接对imagefilpx的函数，只有canvas上的操作
    flipx(){
        var context=this.dir.ctx
        context.save()
        var x=this.x
        //translate把当前的(0,0)点定位(x,y)定为，点(x,y)为当前原点(0,0)，绘图后图是 sprite.x=sprite.x+x,sprite.y=sprite.y+y
        context.translate(x,0)
        //scale(width,height),(-1,1),理解为关于原点对称，变换后图像的轴也会跟着变，绘图后是 sprite.x=sprite.x-x,sprite.y=sprite.y+y 图像反向绘制
        context.scale(-1,1)
        //考虑到图片宽度过大，水平翻转后超出canvas，把点定到sprite.x=sprite.x+x(因为scale缘故所以是+),也就是到对称轴的距离为0
        context.translate(-x,0)
        this.dir.drawNode(this)
        context.restore()
    }
    draw() {
        log('draw')
        this.dir.drawNode(this)
        this.dir.ctx.drawImage(this.image, this.x, this.y)
    }
}